<script setup>
import { reactive } from 'vue';
import { useMouse } from './mouse.js'

// const { x, y } = useMouse()
// 如果你更希望以对象属性的形式来使用组合式函数中返回的状态，你可以将返回的对象用 reactive() 包装一次，这样其中的 ref 会被自动解包
const mouse = reactive(useMouse())
console.log(mouse.x);
</script>

<template>Mouse position is at: {{ mouse.x }}, {{ mouse.y }}</template>
